<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ref</title>
  </head>
  <body>
    <div id="app">
      {{ count }}
      <button @click="add">加1</button>
      <br />

      state.count: {{ state.count }}
      <button @click="increment">加10</button>
    </div>
  </body>
  <script src=""></script>
  <script>
    Vue.createApp({
      setup() {
        const count = ref(10);
        const add = () => {
          count.value += 1;
        };
        //如果将ref赋值给一个reactive属性时间，这个ref会被自动解包（不需要写.value）
        const obj = reactive({}); //剧透 reactive用于创建响应式的对象数据
        obj.count = count; //自动解包， 不解包obj.count = count.value
        console.log(obj.count);
        console.log(obj.count === count.value);

        //如果讲一个对象赋值给ref，那么这个对象讲通过reactive（）转为具有深层次响应的对象
        const state = ref({ count: 100 });
        const increment = () => {
          state.value.count += 10;
        };

        //定义对象使用reactive() 其他使用ref()
        return {
          count,
          add,
          state,
          increment,
        };
      },
    });
  </script>
</html>
